<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        a{
            text-decoration: none;
            color: white;
        }
        a:hover{
            text-decoration: none;
            color: grey;
        }
        #pagingul{height: 34px;}
        #pagingul1{
            height: 34px;
            float: right;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row clear">
        <div class="row-md-12">
            <div class="page-header"></div>
        </div>
    </div>

    <div class="row clear">
        <div class="row-md-12">
            <%--查询--%>
            <%--交给Ajax--%>
            <div class="row clear">
                <div class="col-md-9">
                    <div class="form-inline">
                        <input style="width: 300px" type="text" class="form-control" id="queryCriteria" placeholder="username">
                        <select id="queryRoleCode" class="form-control">
                            <option value="0" selected>roleCode</option>
                            <option value="1">系统管理员</option>
                            <option value="2">经理</option>
                            <option value="3">普通员工</option>
                        </select>
                        <button class="btn btn-primary" id="queryBtn" onclick="show()" style="height: 34px;">
                            &emsp;<span class="glyphicon glyphicon-search"></span>&emsp;
                        </button>
<%--                        <input type="button" class="btn btn-primary" value="Query" id="queryBtn" onclick="show()">--%>
                    </div>
                </div>
            </div>

            <%--添加--%>
            <div class="col-md-offset-11">
                <button type="button" class="btn btn-danger">
                    <a href="${pageContext.request.contextPath}/user/userDo/addPage">&emsp;<span class="glyphicon glyphicon-plus"></span>Add&emsp;</a>
                </button>
            </div>
        </div>
    </div>

    <div class="row clearfix">
        <div class="row-md-12">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>id</th>
                    <th>userCode</th>
                    <th>UserName</th>
                    <th>birthday</th>
                    <th>gander</th>
                    <th>role</th>
                    <th>operation</th>
                </tr>
                </thead>
                <tbody id="tbodyUserList">

                </tbody>
            </table>

            <%--翻页按钮--%>
            <div id="pagingdiv">
                <nav aria-label="Page navigation">
                    <ul class="pagination" id="pagingul"></ul>
                    <ul class="pagination" id="pagingul1"></ul>
                </nav>
            </div>

        </div>
    </div>
</div>

<%@include file="viewuser.jsp"%>
<!-- 模态框   信息删除确认 -->
<div class="modal fade" id="delcfmOverhaul">
    <div class="modal-dialog">
        <div class="modal-content message_align">
            <div class="modal-header">
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <!-- 隐藏需要删除的id -->
                <input type="hidden" id="deleteUserId" name="deleteUserId" />
                <input type="hidden" id="deleteUsername" name="deleteUsername" />
                <p>您确认要删除该条信息吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">取消</button>
                </button>
                <button type="button" class="btn btn-danger" id="deleteHaulBtn">delete</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<%--这两个导入有顺序--%>
<script src="${pageContext.request.contextPath}/webjars/jquery/3.6.0/jquery.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script>
    //总记录数
    let totalNum;
    //总页数
    let totalPage;
    //默认每页显示数
    let pageSize = 7;
    //默认显示第一页
    let currentPageNo = 1;

    // 打开询问是否删除的模态框并设置需要删除的ID
    let showDeleteModal = function (id,name) {
        let delete_id = id;
        let delete_name = name;// 获取隐藏的姓名
        console.log('');
        console.log('要删除的姓名与id为：'+id+','+name);
        $("#deleteUserId").val(delete_id);// 将模态框中需要删除d的name设为需要删除的name
        $("#deleteUsername").val(delete_name);// 将模态框中需要删除的ID设为需要删除的ID
        $("#delcfmOverhaul").modal({
            keyboard : false
        });
    }

    // 查看信息模态框的内容
    let CheckModalContent = function (id) {
        $.ajax({
            url: "${pageContext.request.contextPath}/user/userDo/check",
            type: "POST",
            data: {
                id: id
            },
            success: function (data) {
                let user =data;
                let gender = user.gender;
                if(user.gender === 1){gender = "男"}
                else{gender = "女"}
                console.log(user.birthday);
                let html =  "<p><strong>用户编号：</strong><span>"+user.userCode+"</span></p>"+
                "<p><strong>用户名称：</strong><span>"+user.userName+"</span></p>"+
                "<p><strong>用户性别：</strong>"+
                    "<span>"+gender+"</span>"+
                "</p>"+
                "<p><strong>出生日期：</strong>"+
                    "<span>"+user.birthday+"</span>"+
                "</p>"+
                "<p><strong>用户电话：</strong><span>"+user.phone+"</span></p>"+
                "<p><strong>用户地址：</strong><span>"+user.address+"</span></p>"+
                "<p><strong>用户角色：</strong><span>"+user.userRoleName+"</span></p>";
                $('#checkModel').html(html);
            }
        })
        $("#CheckView").modal({
            keyboard : false
        });
    }

    //跳转页面
    let JumpPage = function () {
        let page = $('#page').val();
        console.log("\n要跳转的页数为"+page);
        currentPageNo = page;
        getUserList('${pageContext.request.contextPath}/user/userDo/query','POST');
    }

    function show() {
        console.log('\n查询的userName：'+$('#queryCriteria').val());
        console.log('查询的userRole：'+$('#queryRoleCode').val());
    }

    $(function () {
        //查询按钮
        $('#queryBtn').click(function(){
            //根据新的查询条件查询时返回第一页
            currentPageNo = 1;
            getUserList("${pageContext.request.contextPath}/user/userDo/query",'GET');
            <%--totalNum = ${pageContext.request.getAttribute("totalNum")};--%>
            <%--console.log('总数'+totalNum);--%>
            <%--totalPage = ${pageContext.request.getAttribute("totalPage")};--%>
            <%--console.log('页数'+totalPage);--%>
        });
        //删除确认按钮
        $('#deleteHaulBtn').click(function(){
            let userid = $("#deleteUserId").val();
            let url = '${pageContext.request.contextPath}/user/userDo/delete?id='+userid;
            $("#delcfmOverhaul").modal('hide');
            getUserList(url,'GET');
        });
        //设置分页栏点击时候的高亮
        $("#pagingul").on("click","li",function(){
            //获取<a>标签中的value值
            let url = '${pageContext.request.contextPath}/user/userDo/query';
            //aText记录被点击的标签中的内容，用于判断是上下页键还是页数键
            let aText = $(this).find('a').html();
            console.log("");
            console.log('被点击分页标签li，a的内容为：'+aText);
            checkA();
            if (aText.search("Prev")!==-1){//上一页
                currentPageNo = currentPageNo-1;
                $(".pagination > li").removeClass("active");//所有清除高亮
                $("#"+currentPageNo).addClass("active");//设置高亮
                getUserList(url,'GET');
                checkA();//检查是否已经到了首页或尾页，对按钮作禁用
            }else if(aText.search("Next")!==-1){//下一页
                currentPageNo = currentPageNo+1;
                $(".pagination > li").removeClass("active");//所有清除高亮
                $("#"+(currentPageNo)).addClass("active");//设置高亮
                getUserList(url,'GET');
                checkA();//检查是否已经到了首页或尾页，对按钮作禁用
            }else{//页数键
                console.log("被点击页数的li标签id为："+this.id);
                //不能直接写this.id这样会使currentPageNo变成字符串
                //按下一页时currentPageNo+1会变成字符串的拼接  ‘11’
                currentPageNo = parseInt(this.id);
                getUserList(url,'GET');
                $(".pagination > li").removeClass("active");
                $(this).addClass("active");
            }
        })
    })

    function getUserList(url,type) {
        $.ajax({
                url:url,
                type:type,
                data:{
                    name:$('#queryCriteria').val(),
                    userRole:$('#queryRoleCode').val(),
                    currentPageNo:currentPageNo,
                    pageSize:pageSize
                },
                success: function (data){
                    totalNum = data.totalNum;
                    totalPage = data.totalPage;
                    let userList = data.userList;
                    console.log("ajax返回的数据："+data);
                    console.log(data);
                    console.log("查到的数据总条数："+totalNum);
                    console.log("查到的数据总条页数："+totalPage);
                    console.log("当前页："+currentPageNo);
                    let html = "";
                    for (let i = 0; i < userList.length; i++) {
                        let gender = "";
                        let id = userList[i].id;
                        let name = userList[i].userName;
                        if (userList[i].gender === 1){
                            gender = "男";
                        }else{
                            gender = "女";
                        }
                        html += '<tr>'+
                            '<td>'+userList[i].id+'</td>'+
                            '<td>'+userList[i].userCode+'</td>'+
                            '<td>'+userList[i].userName+'</td>'+
                            '<td>'+userList[i].birthday+'</td>'+
                            '<td>'+gender+"</td>"+
                            '<td>'+userList[i].userRoleName+'</td>'+
                            '<td>'+
                            '<button type="button" class="btn btn-info" onclick="CheckModalContent('+id+');">'+
                            '<a href="javascript:void(0)">check</a>'+
                            '</button>'+
                            '<button type="button" class="btn btn-warning">'+
                            '<a href="${pageContext.request.contextPath}/user/userDo/modifyPage?id='+id+'">update</a>'+
                            '</button>'+
                            '<button type="button" class="btn btn-danger" onclick="showDeleteModal('+id+',\''+name+'\');">'+
                            '<a href="javascript:void(0)">delete</a>'+
                            '</button>'+
                            '</td>'+
                            '</tr>';
                    }

                    initPagination(totalPage,totalNum);
                    $('#tbodyUserList').html(html);
                }
            }
        )
    }
    
    //初始化分页栏
    function initPagination(totalPage,totalNum) {
        let html = '';
        // &laquo;&raquo;
        //上一页
        html += '<li>'+
                    '<a aria-label="Previous" href="javascript:void(0);" id="prev">'+
                        '<span aria-hidden="true">Prev</span>'+
                    '</a>'+
                '</li>';
        //页数按键
        for (let i = 1; i <= totalPage; i++) {
            html +='<li id="'+i+'">' +
                        '<a href="javascript:void(0);" >' +
                            i +
                        '</a>'+
                    '</li>';
        }
        //下一页
        html += '<li>'+
                    '<a aria-label="Next" href="javascript:void(0);"  id="next">'+
                        '<span aria-hidden="true">Next</span>'+
                    '</a>'+
                '</li>';
        let html1 = "<span>共"+totalPage+"页 第</span>"+
                    "<input type='number' id='page' value='"+currentPageNo+"' min='1' max='"+totalPage+"' style='height: 34px'>"+
                    "<button class='btn btn-default' style='height: 34px' onclick='JumpPage()'>跳转</button>";
        $('#pagingul').html(html);
        $('#pagingul1').html(html1);
        //$('#pagingdiv').html('<h4>共有'+totalNum+'条记录<h4/>');
        $("#"+currentPageNo).addClass("active");
        checkA(currentPageNo);
    }

    //主要是用于检测当前页如果为首页，或者尾页时，上一页和下一页设置为不可选中状态
    function checkA(currentPageNO) {
        currentPageNO == 1 ? $("#prev").addClass("btn btn-default disabled") : $("#prev").removeClass("btn btn-default disabled");
        currentPageNO == totalPage ? $("#next").addClass("btn btn-default disabled") : $("#next").removeClass("btn btn-default disabled");
    }

    //页面加载时初始化userlist与分页按钮
    $(document).ready(function () {
        getUserList("${pageContext.request.contextPath}/user/userDo/query",'GET');
    })

</script>


</body>
</html>
